<template>
	<van-button
		class="follow-btn"
		round
		size="small"
		v-if="value"
		:loading="loading"
		@click="onFollow"
		>已关注</van-button
	>
	<van-button
		v-else
		class="follow-btn"
		type="info"
		color="#3296fa"
		round
		size="small"
		icon="plus"
		:loading="loading"
		@click="onFollow"
		>关注</van-button
	>
</template>

<script>
import { addFollow, deleteFollow } from '@/api/user'

export default {
	name: 'FollowUser',
	props: {
		value: {
			type: Boolean,
			required: true,
		},
		userId: {
			type: [Number, String, Object],
			required: true,
		},
	},
	data() {
		return {
			loading: false,
		}
	},
	methods: {
		async onFollow() {
			// 先判断有没有登录
			if (!this.$store.state.user) return this.$toast('请登录')
			// 开启loading
			this.loading = true
			try {
				// const authorId = this.article.aut_id
				if (this.value) {
					// 如果关注，则取消关注
					await deleteFollow(this.userId)
				} else {
					// 未关注，则添加关注
					await addFollow(this.userId)
				}
				this.$emit('input', !this.value)
			} catch (err) {
				console.log(err)
				// 是否关注自己
				if (err && err.response.status === 400) {
					this.$toast('你不能关注自己')
				} else {
					this.$toast.fail('操作失败')
				}
			}
			this.loading = false
		},
	},
}
</script>

<style></style>
